<template>
<div class="layout-app">
	<!-- 悬浮按钮 -->
	<div v-if="isMinimized" class="minimized-button" @click="restoreDialog">
	  <i class="el-icon-message"></i>
	</div>
	<!-- main -->
	<el-dialog title="新建药房申领 [中药]" :visible.sync="addDialogVisible" width="58%" v-dialogDrag 
	:before-close="handleClose" :modal="false"
	custom-class="minimizable-dialog">
	<!-- 新增 -->
	<div class="addAcc" ref='myBox' v-if="!isMinimized">
		<!-- tabs -->
		<div class="tabs">
			<div class="tabsMain">
				<!-- 表单 header -->
				<div class="headerForm">
					<el-form ref="addForm" :rules="addFormRules" :model="addForm" label-width="70px" size="mini">
						<el-row :gutter="8">
							<el-col :xs="val.xs" :sm="val.xs" :md="val.md" :lg="val.lg" :xl="val.xl" type="flex" v-for="(val,i) in formType" :key="i">
								<!-- input -->
								<el-form-item v-if="val.type == 'input'" :label="val.label" :prop="val.modelValue">
									<el-input :suffix-icon='val.prefix' v-model="$data.addForm[val.modelValue]" :placeholder="val.placeholder" :disabled="val.disabled" ></el-input>
								</el-form-item>
								<!-- textarea -->
								<el-form-item v-if="val.type == 'textarea'" :label="val.label" :prop="val.modelValue">
									<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="$data.addForm[val.modelValue]"></el-input>
								</el-form-item>
								<!-- select -->
								<el-form-item v-if="val.type == 'select'" :label="val.label" :prop="val.modelValue">
									<el-select v-model="$data.addForm[val.modelValue]" filterable placeholder="请选择" @focus="sname(val,i)"
									@change="handleChange" :disabled="val.disabled">
										<el-option v-for="item in $data[val.op]" :key="item.id" :label="item.label" :value="item.id"> 
										<span style="color: #8492a6; font-size: 12px">{{ item.label }}</span></el-option>
									</el-select>
								</el-form-item>
								<!-- date -->
								<el-form-item v-if="val.type == 'date'" :label="val.label" :prop="val.modelValue">
									<el-date-picker
									:picker-options="pickerOptions" :disabled="val.disabled ? true : false"
									 value-format="yyyy-MM-dd"
									type="date" placeholder="选择日期" v-model="$data.addForm[val.modelValue]">
									</el-date-picker>
								</el-form-item>
								<!-- btn -->
								<el-form-item v-if="val.type == 'btn'">
									<el-button type="primary" plain @click="clickEvents(val,i)">{{ val.label }}</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<!-- 表单数据！第二层取addForm下的list -->
				<div class="mainForm">
					<el-form ref="addMainForm" :rules="addMainFormRules" :model="addMainForm" label-width="82px" size="mini">
						<el-row :gutter="8">
							<el-col :xs="val.xs" :sm="val.xs" :md="val.md" :lg="val.lg" :xl="val.xl" type="flex" v-for="(val,i) in formMainType" :key="i">
								<!-- select one -->
								<el-form-item v-if="val.type == 'selectFirst'" :label="val.label" :prop="val.modelValue">
									<el-select v-model="$data.addMainForm[val.modelValue]" :disabled="val.disabled ? disabled : val.disabled" filterable
									@focus="handlefoucs(val,i)" @change="handleChangeDrug" :filter-method="searchMethod" :popper-append-to-body="false">
										<el-option v-for="item in $data[val.op]" :key="item.id" :label="item.label" :value="item.id">
											<span style="font-size: 12px">{{ item.label }}</span></el-option>
										</el-option>
									</el-select>
								</el-form-item>
								<!-- select -->
								<el-form-item v-if="val.type == 'select'" :label="val.label" :prop="val.modelValue">
									<el-select v-model="$data.addMainForm[val.modelValue]" :disabled="val.disabled ? disabled : val.disabled" filterable>
										<el-option v-for="item in $data[val.op]" :key="item.id" :label="item.label" :value="item.id">
											<span style="font-size: 12px">{{ item.label }}</span></el-option>
										</el-option>
									</el-select>
								</el-form-item>
								<!-- input -->
								<el-form-item v-if="val.type == 'input1'" :label="val.label" :prop="val.modelValue">
									<el-input :suffix-icon='val.prefix' v-model="$data.addMainForm[val.modelValue]" @blur="handleInputPacCut(val,i)" 
									 :disabled="val.disabled ? disabled : val.disabled"></el-input>
								</el-form-item>
								<!-- input -->
								<el-form-item v-if="val.type == 'input'" :label="val.label" :prop="val.modelValue">
									<el-input :suffix-icon='val.prefix' v-model="$data.addMainForm[val.modelValue]" 
									:disabled="val.disabled"></el-input>
								</el-form-item>
								<!-- textarea -->
								<el-form-item v-if="val.type == 'textarea'" :label="val.label" :prop="val.modelValue">
									<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="$data.addMainForm[val.modelValue]"
									:disabled="val.disabled"></el-input>
								</el-form-item>
								<!-- date -->
								<el-form-item v-if="val.type == 'date'" :label="val.label" :prop="val.modelValue">
									<el-date-picker class="autoWidth" :picker-options="pickerOptions" :disabled="val.disabled"
									type="date" placeholder="选择日期" v-model="$data.addMainForm[val.modelValue]">
									</el-date-picker>
								</el-form-item>
								<!-- btn -->
								<el-form-item v-if="val.type == 'btn'">
									<el-button type="primary" plain @click="clickEvents(val,i)">{{ val.label }}</el-button>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<!-- table -->
				<div class="table">
					<el-table :data="tableData" border 
					:style="{ width: tableWidth + 'px' }"
					:cell-class-name="tableCellClassName" 
					@row-dblclick="dbclick" 
					>
						<!-- 字段映射 -->
						<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
						<!-- fixed -->
						<el-table-column fixed="left" label="行号" type="index" width="68" align="center"></el-table-column>
						<!-- edit -->
						<el-table-column fixed="right" label="操作" width="148">
							<template slot-scope="scope">
								<div class="editbox" style="text-align: center;">
									<el-button type="primary" @click="handleClickEdit(scope.row)" size="mini">编辑</el-button>
									<el-button type="danger" @click.native.prevent="deleteRow(scope.$index, tableData)" size="mini">删除</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<div class="total">
						<span>合计金额：</span><el-input v-model="cbValue" style="width: 128px;" size="mini" :disabled='totaldisabled'></el-input>
					</div>
				</div>
			</div>
		</div>
		  <div slot="footer" class="dialog-footer">
			<el-button size="mini" type="info" plain @click="draftSubmit">存为草稿</el-button>
			<el-button size="mini" type="primary" plain @click="addSubmit">保存提交</el-button>
			<el-button size="mini" plain @click="minimizeDialog">最小化</el-button>
		  </div>
	</div>
	</el-dialog>
	<!-- 内层Model -->
	<div class="innerModel">
		
	</div>

</div>
</template>

<script>
// self
import AccType from './addPharmacyType.js'
import AccMainType from './addPharmacyMainType.js'
import addForm from './addForm.js' //Form表单
// prop

// ext
import { getLunar } from 'chinese-lunar-calendar'

// 接口
import { selectDropDownList,purcRetnSelectDrug,addOutbound } from "@/api/systemCatalogue/traMedici.js";
export default {
	components:{
		
	},
	props: ['parentMethod'],
	data(){
		//表单校验取大于0的数字型数据
		var validatePercentage = (rule, value, callback) => { 
			if(value == ''){
				return callback(new Error('出库数量不能为空！'));  
			} else if(value > this.addMainForm.purcCnt){
				return callback(new Error('出库数量不能大于已有的库存数量！'));  
			}
		  callback();
		};
		return{
			//str
			tableWidth:'', //右侧表格动态宽度
			value:'',
			inputSearchValue:'',
			deptCode:'',
			getLunarDay: '',
			drugName:'',
			appId:'', // * 选择采购计划时的Id
			startDate:'', // * 开始时间
			endDate:'', // * 结束时间
			idx:'',
			cbValue:'',
			lsValue:'',
			currentCell: null, // 单元格隐藏
			year: new Date().getFullYear(),
			month: new Date().getMonth() + 1,
			date: new Date().getDate(),
			lunarDate: '',//农历
			// 1 - 3
			firstName:'',
			seconedName:'',
			thirdName:'',
			auditStatus:'5',
			currentRow: null, //单选高亮
			//num
			pageNum: 1, //当前页currentPage
			pageSize: 6,
			totalSize: 10, //总条数
			//ble
			loading:false,
			disabled:true,
			totaldisabled:true,
			isMinimized: false,
			addghdwDialog:false,
			selectDisabled:true,
			addDialogVisible: false, //新增采购入库model
			dialogFormVisible:false,
			innerVisible:false, //内层Model选择采购计划
			//arr
			formType:[], // 表单头部内容
			formMainType:[], // 表单主体内容
			tableData:[],
			tableRows:[
				{ name:"药品编码", prop:"drugCode", type:"" },{ name:"药品名称", prop:"drugName", type:"" },
				{ name:"规格描述", prop:"drugSpec", type:"" },{ name:"生产厂家", prop:"prodentpName", type:"" },
				{ name:"出库数量", prop:"retnCnt", type:"" },{ name:"单位", prop:"dw", type:"" },{ name:"库存数量", prop:"purcCnt", type:"" },
				{ name:"成本单价", prop:"retnPric", type:"" },{ name:"零售单价", prop:"salePric", type:"" },
				{ name:"生产批号", prop:"manuLotnum", type:"" },
			],
			innertableData:[], //内层采购计划数据源
			currentObj:{}, //内层采购计划数据源 = > 单击选择
			currentTable: [],//表格单选
			selectOption:[{id:2,label:'中药库'}],//库房
			kcOptions:[{id:1,label:'最小单位',value:'最小单位'},{id:2,label:'包装单位',value:'包装单位'}], // 库存类型
			ghdwOption:[
				{id:1,label:'水富市人民医院',value:'水富市人民医院'},{id:2,label:'昆明灵泽科技有限公司',value:'昆明灵泽科技有限公司'},
			],
			retnTypeOptions:[
				{id:1,label:'采购退库',value:'采购退库'},{id:2,label:'报损出库',value:'报损出库'},{id:3,label:'过期出库',value:'过期出库'},
				{id:4,label:'捐赠出库',value:'捐赠出库'},{id:5,label:'其他出库',value:'其他出库'},{id:6,label:'输错出库',value:'输错出库'},
				{id:7,label:'科室出库',value:'科室出库'},{id:8,label:'销售出库',value:'销售出库'},{id:9,label:'拆零自动出库',value:'拆零自动出库'},
			],
			// 表单验证规则 header
			addFormRules:{
				shedId: [{ required: true, message: '请先选择要入库的库房！', trigger: 'change' }],
				supplyCandidateId: [{ required: true, message: '请选择供货单位！', trigger: 'change' }],
			},
			// 表单验证规则 main
			addMainFormRules:{
				drugId: [{ required: true, message: '请先选择药品信息！', trigger: 'change' }],
				cglb: [{ required: true, message: '采购类别不能为空！', trigger: 'change' }],
				manuLotnum: [{ required: true, message: '请输入入库药品的生产批号！', trigger: 'blur' }],
				retnCnt: [{ required: true, validator: validatePercentage, trigger: 'blur' }],
				expyDate: [{ required: true, message: '药品的有效日期不能为空！', trigger: 'change' }],
			},
			// 单据状态 0 草稿,1 回退提交,2 已提交,3 回退审核,4 已审核,5 已过单,6 已作废'
			statusOption:[
				{id:0,label:'草稿'},{id:1,label:'回退提交'},{id:2,label:'已提交'},{id:3,label:'回退审核'},{id:4,label:'已审核'},{id:5,label:'已过单'},{id:6,label:'已作废'},
			],
			sexOptions:[{id:1,label:'男',value:'男'},{id:2,label:'女',value:'女'}],
			marryiedOptions:[{id:1,label:'未婚',value:'未婚'},{id:2,label:'已婚',value:'已婚'},{id:3,label:'离异',value:'离异'},{id:4,label:'丧偶',value:'丧偶'},{id:5,label:'再婚',value:'再婚'}],
			nameOption:[],
			
			//obj
			addForm:{}, // form表单 * 
			addMainForm:{}, // form主体表单 * addForm.list
			lists:{},
			options:[],
			ssrOption:[],
			gysOption:[],
			ManufacturerOptions:[],
			//props
			pickerOptions: {
			  shortcuts: [
				{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); }}, 
				{ text: '昨天', onClick(picker) { const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, 
				{ text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}},
				{ text: '最近一个月',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);picker.$emit('pick', date);}},
				{ text: '最近三个月',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 90);picker.$emit('pick', date);}},
				{ text: '半年前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 180);picker.$emit('pick', date);}},
				{ text: '去年',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 360);picker.$emit('pick', date);}},
				]
			},
		}
	},
	created() {
		
	},
	mounted() {
		// 获取接口参数
		this.getAddForm();
		// 定义数据来源
		this.formType = AccType.map(function(val) { return val })
		this.formMainType = AccMainType.map(function(val) { return val })
		// 获取当前日期时间
		this.getNowDateTime();
		// 获取制单人 => 当前登录用户
		this.addForm.createId = JSON.parse(localStorage.getItem('userInfo')).userId;
		// 赋值业务日期
		this.addForm.busDate = new Intl.DateTimeFormat('zh-CN').format(new Date()).replace(/\//g, '-');
	},
	methods:{
		// 采购计划数据
		async loadData(){
			let res = await getPurchasingPlan({
				auditStatus:this.auditStatus,
				startDate:this.startDate,
				endDate:this.endDate,
				pageNum:this.pageNum,
				pageSize:this.pageSize,
			});
			if(res.code == 200){
				this.innertableData = res.data.content
				this.totalSize = res.data.totalSize
			}else{
				this.$message({type: 'error',message: res.message});
			}
		},
		/* 入库药品数据源 */
		async getProData(){
			let res = await purcRetnSelectDrug({
				pageNum:this.pageNum,
				pageSize:this.pageSize,
			})
			console.log(res.data.content)
			this.nameOption = res.data.content.map(obj => {
			  // 将 name 替换为 label，并保留其他字段
			  return { label: obj.drugName , ...obj };
			});
		},
		/* props => 生产厂家模糊查询 */
		searchMethod(query, option) {
			console.log(query);
			if(query){
				console.log(query,'再调一次接口查询');
				this.inputSearchValue = query
				this.pageNum = 1
				this.pageSize = 10
				this.drugName = query
				this.getProData();
			}else{
				console.log('buzou');
			}
		},
		// select聚焦
		async handlefoucs(val,i){
			this.idx = i;
			console.log(i);
			switch (i) {
				case 0: // 药典名称
					this.getProData();
				break;
			}
		},
		// 表格单选 => getPlan
		handleCurrentTableChange(val){
			if(val.state != 5){
				this.setCurrent();
				this.$message({ type: 'error', message: '只能选择已过单数据!'});
			}else{
				// 赋id
				this.appId = val.id
				this.currentTable = val
				this.$message({ type: 'success', message: '已选择:' + this.appId + '的采购计划数据'});
			}
		},
		// 取消高亮
		setCurrent(row) {
		    this.$refs.singleTable.setCurrentRow(row);
		},
		// 表单头部聚焦事件 => addForm
		async sname(val,i) {
			// val.id = i;
			this.idx = i;
			console.log(i);
			// i event
			switch (i) {
				case 2:
					// 供应商下拉列表
					let rs = await selectDropDownList()
					this.gysOption = rs.data.content.map(obj => {
					  // 将 name 替换为 label，并保留其他字段
					  return { label: obj.supplierName , ...obj };
					});
				break;
			}
		},
		// 计算总金额
		getTotalAmt(){
			this.addMainForm.retnAmt = this.addMainForm.retnPric * this.addMainForm.retnCnt
			this.addMainForm.saleAmt = this.addMainForm.salePric * this.addMainForm.retnCnt
			this.addForm.costAmt = this.addMainForm.retnAmt
			this.addForm.saleAmt = this.addMainForm.saleAmt
		},
		handleInputPacCut(v,i){
			this.idx = i;
			console.log(i);
			// i event
			switch (i) {
				case 7:
					this.getTotalAmt();
				break;
			}
		},
		// 循环加入按钮点击事件
		clickEvents(val,i){
			this.idx = i;
			switch (i) {
				case 11:
				//触发验证表单
				this.$refs.addMainForm.validate(async(valid) => {
				if(valid){
					console.log(this.addMainForm);
					if(this.tableData.length == 0){
						this.tableData.push(JSON.parse(JSON.stringify(this.addMainForm)));
						this.$refs['addMainForm'].resetFields();
					}else{
						// 判断是否新增的药品序号和前一条相同
						console.log(this.tableData,'已有的tabledata');
						console.log(this.addMainForm,'addMainForm');
						let res = this.tableData.some(i => i.drugId === this.addMainForm.drugId && i.id === this.addMainForm.id)
						console.log(res);
						// 重复数据
						if(res === true){
							this.$message.error('表格中已存在相同药品：' + this.addMainForm.drugName + '，请勿重复添加！')
						}else{
							this.$message.success('已添加！')
							this.tableData.push(JSON.parse(JSON.stringify(this.addMainForm)))
						}
					}
					}
				})
				break;
			}
		},
		// 查看单据数据
		watchData(){
			this.$message({type: 'waring',message: '正在开发中...' });
		},
		// 当前日期时间
		formatDate(date) {
			  const year = date.getFullYear();
			  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
			  const day = String(date.getDate()).padStart(2, '0');
			  const hours = String(date.getHours()).padStart(2, '0');
			  const minutes = String(date.getMinutes()).padStart(2, '0');
			  const seconds = String(date.getSeconds()).padStart(2, '0');
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},
		// 将当前日期时间设置为夜晚十一点五十九分
		getNowDateTime(){
			// 获取当前日期时间
			const now = new Date();
			// 格式化日期时间 => 将时间设置为凌晨十二点
			const midnight = new Date(now);
			midnight.setHours(0, 0, 0, 0);
			this.startDate = this.formatDate(midnight);
			// 将时间设置为夜晚十一点五十九分
			const evening = new Date(now);
			evening.setHours(23, 59, 0, 0);
			this.endDate = this.formatDate(evening);
		},
		// 开始时间变化值
		startDateHandle(value){ if (value) {this.startDate = this.formatDate(value)}},
		// 结束时间变化值
		endDateHandle(value){ if (value) {this.endDate = this.formatDate(value)}},
		// 时间处理
		changDate(val){
			let i = this.idx
			switch(i) {
				case 5:
				function formatDate(date) {
				  const year = date.getFullYear();
				  const month = (date.getMonth() + 1).toString().padStart(2, '0');
				  const day = date.getDate().toString().padStart(2, '0');
				  return `${year}-${month}-${day}`;
				}
				// 使用示例
				const now = new Date();
				this.addForm.busDate = formatDate(val);
			}
		},
		// SelectVal to editForm
		handleChange(val){
			console.log(val);
			if(val){
				this.disabled = false
			}
			// i event
		},
		// 选择药品
		handleChangeDrug(val){
			let drugrs = this.nameOption.find(name => name.id === val)
			console.log(drugrs);
			this.addMainForm.drugId = drugrs.drugId
			this.addMainForm.prodentpId = drugrs.prodentpNameId
			this.addMainForm.prodentpName = drugrs.prodentpName
			this.addMainForm.retnPric = drugrs.purcPric
			this.addMainForm.drugSpec = drugrs.drugSpec
			this.addMainForm.drugName = drugrs.drugName
			this.addMainForm.purcCnt = drugrs.purcCnt
			if(this.addMainForm.retnCnt > drugrs.purcCnt){
				this.$message({type: 'waring',message: '出库数量不能大于当前库存数量！' });
			}
			this.addMainForm.retnPric = drugrs.purcPric
			this.addMainForm.salePric = drugrs.salePric
			this.addMainForm.drugCode = drugrs.drugCode
			this.addMainForm.unt = drugrs.unt
			this.addMainForm.invId = drugrs.id
		},
		//新增保存
		async addSubmit(){
			//触发验证表单
			this.$refs.addForm.validate(async(valid) => {
			if(valid){
			this.addForm.state = 2
			this.addForm.list = this.tableData
			console.log(this.addForm);
			let result = await addOutbound(this.addForm)
				if (result.code === 200) {
					this.$message({ type: 'success', message: '退库成功！' });
					this.parentMethod(); // 更新数据驱动 => 父组件 shopPlan
					this.addDialogVisible = false;
				} else {
					this.$message.error('退库失败！')
				}
			}
			})
		},
		// 草稿保存
		async draftSubmit(){
			//触发验证表单
			this.$refs.addForm.validate(async(valid) => {
			if(valid){
			this.addForm.state = 0
			this.addForm.list = this.tableData
			console.log(this.addForm);
			let result = await addOutbound(this.addForm)
				if (result.code === 200) {
					this.$message({ type: 'success', message: '采购计划草稿：已保存！！' });
					this.parentMethod(); // 更新数据驱动 => 父组件 shopPlan
					this.addDialogVisible = false;
				} else {
					this.$message.error('失败！')
				}
			}
			})
		},
		// 父组件控制打开新增模态框
		open(parentMsg){
			this.addDialogVisible = parentMsg;
		},
		// 根据选择的id去查找id对应的对象
		foundObj(){
			let rs = this.gysOption.find(name => name.id === val)
		},
		deleteRow(index, rows) {
		  rows.splice(index, 1);
		},
		handleSelectCost(val) {
		  this.addForm.nativePlace = val.join(',')
		},
		// db events
		// 给单元格绑定横向和竖向的index，这样就能确定是哪一个单元格
		tableCellClassName({row, column, rowIndex, columnIndex}){
			row.index = rowIndex;
			column.index = columnIndex;
		},
		// 当input失去焦点的时候，隐藏input
		hideInput(){
		    this.currentCell = null;
		},
		// 获得当前双击的单元格的横竖index，然后拼接成一个唯一字符串用于判断，并赋给currentCell  // 拼接后类似这样："1,0","1,1",
		dbclick(row,column) {
			console.log(column.index);
		},
		// db events
		handledbRow(row, column, event){
			if(row){ this.addForm = row; this.watchDialogVisible = true } else { console.log('fail'); }
			// console.log(this.addForm);
			this.formdisabled = true
		},
		// col 里面包含了表头字段和名称，list 是表格数据
		columnWidth(col, list) {
		  let prop = col.prop,lab = col.lab;
		  let width = 40; // 设定一个最小值
		  let maxlenStr = ""; // 最长字符串
		  for (let info of list) { if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop] }
		  width = Math.max(width, len(lab), len(maxlenStr));
		  // 表格自带的内边距(20px) 自调
		  return width + 24; // 这里加了 12px
		  function len(str) {
			// 实际分配长度可根据需要自行调整
			let length = 12;
			for (const char of str + "") {
			  // 英文小写字符 8px
			  if ("a" <= char && char <= "z") length += 8;
			  // 英文大写字符 8px
			  else if ("A" <= char && char <= "Z") length += 8;
			  // 中文字符 28px
			  else if (char >= "\u4e00" && char <= "\u9fa5") length += 28;
			  // 其他 8px
			  else length += 12;
			}
			return length;
		  }
		},
		// 内层
		innerColumnWidth(col, list){
			let prop = col.prop,lab = col.lab;
			let width = 28; // 设定一个最小值
			let maxlenStr = ""; // 最长字符串
			for (let info of list) { if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop] }
			width = Math.max(width, len(lab), len(maxlenStr));
			// 表格自带的内边距(20px) 自调
			return width + 24; // 这里加了 12px
			function len(str) {
				// 实际分配长度可根据需要自行调整
				let length = 12;
				for (const char of str + "") {
				  // 英文小写字符 8px
				  if ("a" <= char && char <= "z") length += 8;
				  // 英文大写字符 8px
				  else if ("A" <= char && char <= "Z") length += 8;
				  // 中文字符 22px
				  else if (char >= "\u4e00" && char <= "\u9fa5") length += 22;
				  // 其他 8px
				  else length += 12;
				}
				return length;
			}
		},
		// 挂载或销毁前后重新赋值后端参数
		getAddForm(){
			// 左侧提交表单
			this.addForm = addForm.map(v => {return v })[0]; // Form
			this.addMainForm = this.addForm.list[0]
			console.log(this.addForm,'原始的接口参数数据');
			// 解构赋值排除 list 属性 => 弃用
			// this.addHeadrForm = addForm.map(item => { let { list, ...newItem } = item; return newItem })[0];
		},
		//分页
		//每页条数改变触发
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.pageNum = val;
			this.loadData();
		},
		//当前条数改变触发
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.pageNum = val;
			this.loadData();
		},
		// 关闭最小化未保存清空的表单
		minimizeDialog() {
			this.addDialogVisible = false;
			this.isMinimized = true;
		},
		// 打开最小化未保存清空的表单
		restoreDialog() {
			this.addDialogVisible = true;
			this.isMinimized = false;
		},
		// 关闭
		handleClose(done) {
			this.$confirm('关闭此界面会清空现已选择的内容, 是否继续?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
				//清空表单和list
				this.$refs['addForm'].resetFields();
				this.$refs['addMainForm'].resetFields();
				this.tableData = [];
				done();
			}).catch(() => {
			  this.$message({ type: 'info', message: '已取消' });          
			});
		},
	},
	
}
</script>

<style lang="less" scoped>
	/deep/ .el-dialog__header{
		padding: 12px;
		line-height: 28px;
		background-color: #007bb0;
	}
	/deep/ .el-dialog__title{
		color: #fff;
		font-size: 12px;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close{
		color: #fff;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
		background-color: brown;
	}
	/deep/ .el-table .cell{
		font-size: 12px;
		font-weight: 400;
		color: #0c0c0c;
		text-align: center;
	}
	
	/deep/ .el-table .el-table__cell{
		padding: 8px 0;
	}
.layout-app{
    width: 100%;
    height: 100%;
    display: flex;
	background-color: f8f8f8;
	/* 对话框样式 */
	.minimizable-dialog {
	  transition: all 0.3s;
	  transform: rotate(180deg);
	}
	.minimized-button {
	  transform: scale(1.1);
	  cursor: pointer;
	}
	.minimized-button {
	  position: fixed;
	  right: 20px;
	  bottom: 50%;
	  width: 40px;
	  height: 40px;
	  border-radius: 50%;
	  background-color: #409eff;
	  color: white;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  cursor: pointer;
	  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	  z-index: 9999;
	  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	  animation: floatIn 0.3s;
	}
	@keyframes floatIn {
	  from {
	    transform: scale(0) translateY(100%);
	    opacity: 0;
	  }
	  to {
	    transform: scale(1) translateY(0);
	    opacity: 1;
	  }
	}
    .addAcc{
		// self
		// 选项卡
		/deep/ .el-dialog__header{
			padding: 12px;
			background-color: #007bb0;
			height: 12px;
		}
		/deep/ .el-dialog__title{
			font-size: 12px;
			color: #fff;
		}
		/deep/ .el-dialog__headerbtn .el-dialog__close{
			color: #fff;
		}
		/deep/ .el-dialog__headerbtn{
			top: 10px;
		}
		/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
			margin-bottom: 8px;
		}
		/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
			background-color: brown;
		}
		.tabs{
			.tabsMain{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				.table{
					width: 100%;
					margin-top: 12px;
				}
				.total{
					display: flex;
					height: 48px;
					align-items: center;
					span{
						font-size: 12px;
					}
				}
				// 第一层头部表单
				.headerForm{
					/deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner{
						width: 100%;
					}
					border: 1px solid #EBEEF5;
					padding: 12px;
					/deep/ .el-form-item__label{
						display: flex;
						justify-content: start;
						font-size: 12px;
						padding: 0;
					}
				}
				// 第二层主体表单
				.mainForm{
					/deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner{
						width: 100%;
					}
					/deep/ .el-form-item__label{
						display: flex;
						justify-content: center;
						font-size: 10px;
						padding: 0;
					}
					padding: 12px;
					margin-top: 8px;
					border: 1px solid #EBEEF5;
				}
			}	
		}
		.dialog-footer{
			display: flex;
			justify-content: right;
		}
	}
	.innerModel{
		.innerModel-header{
			display: flex;
			align-items: center;
		}
		.innerModel-table{
			
		}
	}
	
}
</style>